<template>
  <!-- 导航 -->
  <van-nav-bar
    title="订单确认"
    left-text="返回"
    left-arrow
  />
  <!-- 主体内容 -->
  <div class="container">
    <!-- 1 地址区域 -->
    <div class="address-card" @click="triggerPopup">
      <p class="info">
        <span class="username" v-text="currentAddress.name"></span>
        <span v-text="currentAddress.tel"></span>
      </p>
      <p class="detail">
        <span class="default" v-if="currentAddress.isDefault">[默认]</span>
        <span v-text="currentAddress.address"></span>
      </p>
    </div>
    <!-- 2 弹出层 -->
    <van-popup
      v-model:show="popupStatus"
      position="bottom"
    >
      <van-address-list
        v-model="chosenAddressId"
        :list="addressList"
        default-tag-text="默认"
        @click-item="changeAddress"
        @add="onAdd"
        @edit="onEdit"
      >
        <!-- 地址为空时显示 -->
        <template #top v-if="isEmpty">
          <van-empty description="还没有地址哦~" />
        </template>
      </van-address-list>
    </van-popup>
    <!-- 3 商品列表 -->
    <div class="product-list">
      <!-- 标题区域 -->
      <van-cell-group>
        <van-cell :title="cartItemCount" />
      </van-cell-group>
      <!-- 内容区域 -->
      <van-cell-group>
        <!-- 单个商品 -->
        <van-cell
          class="product"
          v-for="item in cartInfo"
          :key="item.id"
        >
          <img :src="item.productInfo.image" alt="">
          <div class="info">
            <p class="title" v-text="item.productInfo.store_name"></p>
            <p class="price">￥{{ item.truePrice }}</p>
          </div>
          <span class="count">x{{ item.cart_num }}</span>
        </van-cell>
      </van-cell-group>
    </div>
  </div>
  <!-- 提交订单区域 -->
  <van-submit-bar
    :price="totalPrice"
    label="订单总结："
    button-text="立即付款"
    @submit="showPayPanel = true"
  />
  <!-- 弹出付款区域 -->
  <van-action-sheet
    v-model:show="showPayPanel"
    title="请选择支付方式"
    cancel-text="取消"
    close-on-click-action
  >
    <!-- 付款列表区域 -->
    <template #default>
      <van-radio-group v-model="paymentMethod">
        <van-cell-group>
          <!-- 余额支付 -->
          <van-cell
            clickable
            title="微信支付"
            label="微信快捷支付"
            @click="paymentMethod = 'wechat'"
            size="large"
            center
          >
            <template #icon>
              <van-icon
                name="http://www.lgstatic.com/lg-app-fed/pay/images/wechat_b787e2f4.png"
                size="30"
                :style="{ marginRight: '12px' }"
              ></van-icon>
            </template>
            <template #right-icon>
              <van-radio
                name="wechat"
                checked-color="#ee0a24"
              />
            </template>
          </van-cell>
          <!-- 支付宝 -->
          <van-cell
            clickable
            title="支付宝"
            label="支付宝快捷支付"
            @click="paymentMethod = 'alipay'"
            size="large"
            center
          >
            <template #icon>
              <van-icon
                name="http://www.lgstatic.com/lg-app-fed/pay/images/ali_ed78fdae.png"
                size="30"
                :style="{ marginRight: '12px' }"
              ></van-icon>
            </template>
            <template #right-icon>
              <van-radio
                name="alipay"
                checked-color="#ee0a24"
              />
            </template>
          </van-cell>
          <!-- 余额支付 -->
          <van-cell
            clickable
            title="余额支付"
            :label="`可用余额为：${ yue }元`"
            @click="paymentMethod = 'yue'"
            size="large"
            center
          >
            <template #icon>
              <van-icon
                name="gold-coin"
                color="#FF9900"
                size="30"
                :style="{ marginRight: '12px' }"
              ></van-icon>
            </template>
            <template #right-icon>
              <van-radio
                name="yue"
                checked-color="#ee0a24"
              />
            </template>
          </van-cell>
          <van-cell>
            <van-button
              round
              type="danger"
              block
              @click="handlePay"
            >去支付</van-button>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
    </template>
  </van-action-sheet>
</template>

<script setup>
import {
  NavBar as VanNavBar,
  Popup as VanPopup,
  Radio as VanRadio,
  RadioGroup as VanRadioGroup,
  ActionSheet as VanActionSheet,
  Cell as VanCell,
  CellGroup as VanCellGroup,
  Button as VanButton,
  Icon as VanIcon,
  SubmitBar as VanSubmitBar,
  Empty as VanEmpty,
  AddressList as VanAddressList,
} from 'vant'
import { computed, ref, toRaw } from '@vue/reactivity'

// ---- 1 地址区域 ----
// - 弹出层显示状态控制
const popupStatus = ref(false)
const triggerPopup = () => popupStatus.value = true

// - 选择状态
const chosenAddressId = ref('')
const changeAddress = item => {
  // 更改弹出层显示状态
  popupStatus.value = false
  // 更新当前显示的数据
  currentAddress.value = item
  // console.log(item)
  // console.log(toRaw(item))
}

// - 地址数据
const currentAddress = ref({})
const addressList = ref([])
const isEmpty = computed(() => addressList.value.length === 0)

// 数据转换函数
const convertData = data => {
  return data.map(item => {
    const temp = {
      id: item.id,
      name: item.real_name,
      tel: item.phone,
      address: item.province + item.city + item.district + item.detail,
      isDefault: item.is_default
    }

    // 检测是否为默认数据
    if (item.is_default === 1) {
      // 记录勾选的 ID
      chosenAddressId.value = item.id
      // 记录当前展示数据
      currentAddress.value = temp
    }

    return temp
  })
}

// - 请求数据
import { getAddressList } from '@/api/order'
const initAddressList = async () => {
  const { data } = await getAddressList({ limit: 5, page: 1 })
  if (data.status !== 200) { return }
  addressList.value = convertData(data.data)
}
initAddressList()

// - 地址操作
import { useRouter } from 'vue-router'
const router = useRouter()
const { cartId } = defineProps({
  cartId: {
    type: String,
    required: true
  }
})

const onAdd = () => {
  // 因为新增地址后还要回到订单确认页，这时需要传递 cartId
  router.push({
    name: 'address',
    params: {
      cartId
    }
  })
}
const onEdit = (item, index) => Toast('编辑地址:' + index)

// ---- 2 初始化订单数据 ----
import { confirmOrder, createOrder } from '@/api/order'

// 存储数据
const orderConfirmData = ref({})
// 计算属性处理数据
const cartInfo = computed(() => orderConfirmData.value?.cartInfo)
const cartItemCount = computed(() => `共${cartInfo.value?.length || 0}件`)
const totalPrice = computed(() => (orderConfirmData.value?.priceGroup?.totalPrice || 0) * 100)

// 接收组件传参（在前面引入过）

const initOrderInfo = async () => {
  const { data } = await confirmOrder({
    cartId,
    new: 0
  })
  if (data.status !== 200) { return }
  orderConfirmData.value = data.data
}
initOrderInfo()

// ---- 3 订单确认区域 ----
import { Toast } from 'vant'
const showPayPanel = ref(false)
const paymentMethod = ref('yue')

const yue = computed(() => orderConfirmData.value?.userInfo.now_money || 0)

const handlePay = async () => {
  const { data } = await createOrder(orderConfirmData.value.orderKey, {
    addressId: currentAddress.value.id,
    payType: paymentMethod.value
  })
  if (data.status !== 200) { return }
  // 提示并跳转
  Toast.success('支付成功，自动跳转登录页...')
  router.push({
    name: 'order'
  })
}
  
</script>

<style lang="scss" scoped>
  .van-nav-bar {
    position: fixed !important;
    width: 100%;
  }

  .container {
    padding: 50px 0;

    // 地址卡片
    .address-card {
      padding: 20px 25px;
      font-size: 16px;
      position: relative;

      &::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 2px;
        background: repeating-linear-gradient(90deg, #ff6c6c 0, #ff6c6c 20%, transparent 20%, transparent 25%, #0084ff 25%, #0084ff 45%, transparent 45%, transparent 50%);
        background-size: 80px;
      }

      .info {
        span:first-child {
          padding-right: 20px;
        }
      }

      .detail {
        padding-top: 5px;

        .default {
          background: #D6251F;
          color: #fff;
          font-size: 12px;
          padding: 2px 3px;
          margin-right: 17px;
          border-radius: 3px;
        }
      }
    }

    // 商品列表
    .product-list {
      :deep(.van-cell__value) {
        display: flex;
        align-items: center;

        img {
          width: 70px;
          height: 70px;
        }

        .info {
          padding-left: 5px;

          .title {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
            padding: 0 15px 5px 0;
          }

          .price {
            color: #F2270C;
          }
        }

        .count {
          color: #aaa;
        }
      }
    }
  }
</style>
